<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>龙舟设计 - 中华非遗</title>
    <link rel="stylesheet" href="styles/main.css">
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0/css/all.min.css">
    <style>
        /* 龙舟设计页面专用样式 */
        .dragon-boat-container {
            max-width: 1400px;
            margin: 0 auto;
            padding: 20px;
        }

        .page-header {
            text-align: center;
            margin-bottom: 40px;
            background: linear-gradient(135deg, #ff6b6b, #feca57);
            color: white;
            padding: 60px 20px;
            border-radius: 15px;
        }

        .page-header h1 {
            font-size: 3rem;
            margin-bottom: 15px;
            text-shadow: 2px 2px 4px rgba(0,0,0,0.3);
        }

        .page-header p {
            font-size: 1.2rem;
            opacity: 0.9;
        }

        /* 虚拟实验室模块 */
        .virtual-lab {
            background: #fff;
            border-radius: 15px;
            padding: 30px;
            margin-bottom: 40px;
            box-shadow: 0 10px 30px rgba(0,0,0,0.1);
            border: 2px solid #e74c3c;
        }

        .virtual-lab h2 {
            color: #e74c3c;
            text-align: center;
            font-size: 2.5rem;
            margin-bottom: 30px;
            font-weight: bold;
        }

        .dragon-parts-grid {
            display: grid;
            grid-template-columns: repeat(3, 1fr);
            gap: 30px;
            margin-bottom: 30px;
        }

        .dragon-part {
            background: linear-gradient(145deg, #f8f9fa, #e9ecef);
            border: 3px solid #dc3545;
            border-radius: 15px;
            padding: 25px;
            text-align: center;
            cursor: pointer;
            transition: all 0.3s ease;
            position: relative;
            overflow: hidden;
        }

        .dragon-part:hover {
            transform: translateY(-5px);
            box-shadow: 0 15px 30px rgba(220, 53, 69, 0.3);
            border-color: #c82333;
        }

        .dragon-part.active {
            background: linear-gradient(145deg, #dc3545, #c82333);
            color: white;
        }

        .dragon-part-icon {
            font-size: 3rem;
            color: #dc3545;
            margin-bottom: 15px;
            transition: all 0.3s ease;
        }

        .dragon-part.active .dragon-part-icon {
            color: white;
        }

        .dragon-part h3 {
            font-size: 1.5rem;
            margin-bottom: 10px;
            font-weight: bold;
        }

        .dragon-part p {
            font-size: 0.9rem;
            line-height: 1.4;
        }

        /* 零件图片显示区域 */
        .parts-display {
            background: #f8f9fa;
            border: 2px dashed #dee2e6;
            border-radius: 15px;
            padding: 30px;
            text-align: center;
            min-height: 400px;
            display: flex;
            align-items: center;
            justify-content: center;
            flex-direction: column;
        }

        .parts-display.has-image {
            border-color: #28a745;
            background: #f8fff9;
        }

        .parts-image {
            max-width: 100%;
            max-height: 350px;
            border-radius: 10px;
            box-shadow: 0 5px 15px rgba(0,0,0,0.2);
            display: none;
        }

        .parts-image.active {
            display: block;
        }

        .placeholder-text {
            color: #6c757d;
            font-size: 1.2rem;
            margin-bottom: 15px;
        }

        .placeholder-icon {
            font-size: 4rem;
            color: #dee2e6;
            margin-bottom: 20px;
        }

        /* 设计工具模块 */
        .design-tools {
            background: #fff;
            border-radius: 15px;
            padding: 30px;
            box-shadow: 0 10px 30px rgba(0,0,0,0.1);
            border: 2px solid #007bff;
        }

        .design-tools h2 {
            color: #007bff;
            text-align: center;
            font-size: 2.5rem;
            margin-bottom: 30px;
            font-weight: bold;
        }

        .design-workspace {
            display: grid;
            grid-template-columns: 200px 1fr 200px;
            gap: 30px;
            align-items: start;
        }

        .tool-panel {
            background: #f8f9fa;
            border-radius: 10px;
            padding: 20px;
            border: 1px solid #dee2e6;
        }

        .tool-panel h3 {
            color: #495057;
            margin-bottom: 20px;
            font-size: 1.2rem;
            text-align: center;
            font-weight: bold;
        }

        .tool-buttons {
            display: flex;
            flex-direction: column;
            gap: 10px;
        }

        .tool-btn {
            background: linear-gradient(145deg, #007bff, #0056b3);
            color: white;
            border: none;
            padding: 12px 15px;
            border-radius: 8px;
            cursor: pointer;
            font-size: 0.9rem;
            transition: all 0.3s ease;
            display: flex;
            align-items: center;
            gap: 8px;
        }

        .tool-btn:hover {
            transform: translateY(-2px);
            box-shadow: 0 5px 15px rgba(0, 123, 255, 0.4);
        }

        /* 颜色选择按钮样式 */
        .color-buttons {
            display: grid;
            grid-template-columns: 1fr;
            gap: 8px;
        }

        .color-btn {
            color: white;
            border: 2px solid transparent;
            padding: 10px 12px;
            border-radius: 8px;
            cursor: pointer;
            font-size: 0.85rem;
            transition: all 0.3s ease;
            display: flex;
            align-items: center;
            gap: 6px;
            font-weight: 500;
            text-shadow: 1px 1px 2px rgba(0,0,0,0.3);
            position: relative;
            overflow: hidden;
        }

        .color-btn:hover {
            transform: translateY(-2px) scale(1.02);
            box-shadow: 0 6px 20px rgba(0,0,0,0.3);
            border-color: rgba(255,255,255,0.3);
        }

        .color-btn.active {
            transform: translateY(-3px) scale(1.05);
            box-shadow: 0 8px 25px rgba(0,0,0,0.4);
            border-color: rgba(255,255,255,0.6);
        }

        .color-btn::before {
            content: '';
            position: absolute;
            top: 0;
            left: -100%;
            width: 100%;
            height: 100%;
            background: linear-gradient(90deg, transparent, rgba(255,255,255,0.2), transparent);
            transition: left 0.5s;
        }

        .color-btn:hover::before {
            left: 100%;
        }

        .design-canvas {
            background: #fff;
            border: 2px dashed #dee2e6;
            border-radius: 15px;
            padding: 30px;
            text-align: center;
            min-height: 500px;
            display: flex;
            align-items: center;
            justify-content: center;
            flex-direction: column;
            position: relative;
        }

        .design-canvas.active {
            border-color: #28a745;
            background: #f8fff9;
        }

        .canvas-image {
            max-width: 100%;
            max-height: 450px;
            border-radius: 10px;
            box-shadow: 0 5px 15px rgba(0,0,0,0.2);
            display: none;
        }

        .canvas-image.active {
            display: block;
        }

        .canvas-placeholder {
            color: #6c757d;
            text-align: center;
        }

        .canvas-placeholder-icon {
            font-size: 5rem;
            color: #dee2e6;
            margin-bottom: 20px;
        }

        /* 属性面板 */
        .property-panel {
            background: #f8f9fa;
            border-radius: 10px;
            padding: 20px;
            border: 1px solid #dee2e6;
        }

        .property-group {
            margin-bottom: 20px;
        }

        .property-group label {
            display: block;
            margin-bottom: 8px;
            font-weight: bold;
            color: #495057;
        }

        .property-input {
            width: 100%;
            padding: 8px 12px;
            border: 1px solid #ced4da;
            border-radius: 5px;
            font-size: 0.9rem;
        }

        .color-picker {
            width: 100%;
            height: 40px;
            border: none;
            border-radius: 5px;
            cursor: pointer;
        }

        .number-input {
            width: 80px;
            margin-left: 10px;
            display: inline-block;
        }

        .property-group span {
            margin-left: 10px;
            color: #6c757d;
            font-size: 0.9rem;
        }

        /* 响应式设计 */
        @media (max-width: 768px) {
            .dragon-parts-grid {
                grid-template-columns: 1fr;
                gap: 20px;
            }

            .design-workspace {
                grid-template-columns: 1fr;
                gap: 20px;
            }

            .page-header h1 {
                font-size: 2rem;
            }

            .virtual-lab h2,
            .design-tools h2 {
                font-size: 2rem;
            }
        }
    </style>
</head>
<body class="theme-heritage">
    <!-- 导航栏组件容器 -->
    <div id="navbar-container"></div>

    <!-- 主要内容区域 -->
    <main style="margin-top: 70px;">
        <div class="dragon-boat-container">
            <!-- 页面头部区块 -->
            <section class="page-header">
                <h1>龙舟设计工坊</h1>
                <p>传承千年龙舟文化，打造现代设计理念</p>
            </section>

            <!-- 虚拟实验室模块 -->
            <section class="virtual-lab">
                <h2>虚拟实验室</h2>
                
                <!-- 龙舟部件选择 -->
                <div class="dragon-parts-grid">
                    <div class="dragon-part" data-part="head">
                        <div class="dragon-part-icon">
                            <i class="fas fa-dragon"></i>
                        </div>
                        <h3>龙头</h3>
                        <p>龙舟的精神象征，威武神圣的造型设计</p>
                    </div>

                    <div class="dragon-part" data-part="body">
                        <div class="dragon-part-icon">
                            <i class="fas fa-ship"></i>
                        </div>
                        <h3>龙身</h3>
                        <p>包括内部精细结构，承载力与美观的完美结合</p>
                    </div>

                    <div class="dragon-part" data-part="tail">
                        <div class="dragon-part-icon">
                            <i class="fas fa-fish"></i>
                        </div>
                        <h3>龙尾</h3>
                        <p>平衡与推进的关键部位，优雅的收尾设计</p>
                    </div>
                </div>

                <!-- 零件图片显示区域 -->
                <div class="parts-display" id="partsDisplay">
                    <div class="placeholder-icon">
                        <i class="fas fa-mouse-pointer"></i>
                    </div>
                    <div class="placeholder-text">选中龙头时出现的是龙头有关的零件图片，选中龙身，龙尾时也出现对应的零件图片图片。（左侧选中龙头、龙身、龙尾需要做三个跳转页面）</div>
                    
                    <!-- 预设的图片，通过JavaScript控制显示 -->
                    <img src="img/龙舟结构图/绘制龙舟结构图 (9).png" alt="龙头结构图" class="parts-image" data-part="head">
                    <img src="img/龙舟结构图/绘制龙舟结构图 (10).png" alt="龙身结构图" class="parts-image" data-part="body">
                    <img src="img/龙舟结构图/绘制龙舟结构图 (11).png" alt="龙尾结构图" class="parts-image" data-part="tail">
                </div>
            </section>

            <!-- 设计工具模块 -->
            <section class="design-tools">
                <h2>完整的龙舟图片</h2>
                
                                 <div class="design-workspace">
                     <!-- 左侧工具面板 -->
                     <div class="tool-panel">
                         <h3>颜色选择</h3>
                         <div class="color-buttons">
                             <button class="color-btn" data-color="red" style="background: linear-gradient(145deg, #FC020A, #FC020A);">
                                 <i class="fas fa-palette"></i> 红色
                             </button>
                             <button class="color-btn" data-color="gold" style="background: linear-gradient(145deg, #ffc107, #e0a800);">
                                 <i class="fas fa-palette"></i> 金色
                             </button>
                             <button class="color-btn" data-color="blue" style="background: linear-gradient(145deg, #007bff, #0056b3);">
                                 <i class="fas fa-palette"></i> 蓝色
                             </button>
                             <button class="color-btn" data-color="green" style="background: linear-gradient(145deg, #28a745, #1e7e34);">
                                 <i class="fas fa-palette"></i> 绿色
                             </button>
                             <button class="color-btn" data-color="purple" style="background: linear-gradient(145deg, #6f42c1, #5a32a3);">
                                 <i class="fas fa-palette"></i> 紫色
                             </button>
                             <button class="color-btn" data-color="orange" style="background: linear-gradient(145deg, #fd7e14, #e55100);">
                                 <i class="fas fa-palette"></i> 橙色
                             </button>
                             <button class="color-btn" data-color="pink" style="background: linear-gradient(145deg, #e83e8c, #d91a72);">
                                 <i class="fas fa-palette"></i> 粉色
                             </button>
                             <button class="color-btn" data-color="cyan" style="background: linear-gradient(145deg, #17a2b8, #138496);">
                                 <i class="fas fa-palette"></i> 青色
                             </button>
                         </div>
                     </div>

                     <!-- 中间设计画布 -->
                     <div class="design-canvas active" id="designCanvas">
                         <div class="canvas-placeholder" style="display: none;">
                             <div class="canvas-placeholder-icon">
                                 <i class="fas fa-image"></i>
                             </div>
                             <h3>点击左侧按钮查看龙舟图片</h3>
                         </div>
                         
                         <!-- 预设的龙舟完整图片 -->
                         <img src="img/龙舟结构图/绘制龙舟结构图 (9).png" alt="完整龙舟" class="canvas-image active" id="dragonBoatImage">
                     </div>

                     <!-- 右侧属性面板 -->
                     <div class="property-panel">
                         <h3>船速</h3>
                         <div class="property-group">
                             <label for="boatSpeed">船速值：</label>
                             <input type="range" id="boatSpeed" class="property-input" min="1" max="100" value="30">
                             <input type="number" id="boatSpeedInput" class="property-input number-input" min="1" max="100" value="30">
                             <span>km/h</span>
                         </div>

                         <h3 style="margin-top: 30px;">水的流速</h3>
                         <div class="property-group">
                             <label for="waterSpeed">流速值：</label>
                             <input type="range" id="waterSpeed" class="property-input" min="1" max="100" value="50">
                             <input type="number" id="waterSpeedInput" class="property-input number-input" min="1" max="100" value="50">
                             <span>km/h</span>
                         </div>

                         <h3 style="margin-top: 30px;">船底弧度</h3>
                         <div class="property-group">
                             <label for="boatCurvature">弧度系数：</label>
                             <input type="range" id="boatCurvature" class="property-input" min="0.1" max="2.0" step="0.1" value="1.0">
                             <input type="number" id="boatCurvatureInput" class="property-input number-input" min="0.1" max="2.0" step="0.1" value="1.0">
                         </div>
                     </div>
                </div>
            </section>
        </div>
    </main>

    <!-- 页面底部 -->
    <footer class="main-footer">
        <div class="container">
            <div class="footer-content">
                <div class="footer-section">
                    <h4>关于我们</h4>
                    <p>致力于保护和传承中华民族非物质文化遗产</p>
                </div>
                <div class="footer-section">
                    <h4>快速链接</h4>
                    <ul>
                        <li><a href="about.html">认识非遗</a></li>
                        <li><a href="explore.html">走近非遗</a></li>
                        <li><a href="heritage.html">传习非遗</a></li>
                    </ul>
                </div>
                <div class="footer-section">
                    <h4>联系我们</h4>
                    <p>邮箱: info@heritage.cn</p>
                    <p>电话: 010-12345678</p>
                </div>
            </div>
            <div class="footer-bottom">
                <p>&copy; 2024 中华非遗. 保留所有权利.</p>
            </div>
        </div>
    </footer>

    <!-- AI对话按钮 -->
    <button class="ai-chat-button" id="aiChatButton" title="AI助手">
        <i class="fas fa-robot"></i>
    </button>

    <!-- AI对话弹窗 -->
    <div class="ai-chat-modal" id="aiChatModal">
        <div class="ai-chat-window">
            <!-- 对话窗口头部 -->
            <div class="ai-chat-header">
                <div class="ai-chat-title">
                    <i class="fas fa-robot"></i>
                    <span>非遗索思AI助手</span>
                </div>
                <button class="ai-chat-close" title="关闭">
                    <i class="fas fa-times"></i>
                </button>
            </div>

            <!-- 对话消息区域 -->
            <div class="ai-chat-messages">
                <!-- 消息将通过JavaScript动态添加 -->
            </div>

            <!-- 输入区域 -->
            <div class="ai-chat-input-area">
                <textarea 
                    class="ai-chat-input" 
                    id="chatInput" 
                    placeholder="请输入您想了解的非遗问题..."
                    rows="1"
                ></textarea>
                <button class="ai-chat-send" id="chatSend" title="发送">
                    <i class="fas fa-paper-plane"></i>
                </button>
            </div>
        </div>
    </div>

    <!-- JavaScript脚本 -->
    <script>
        /**
         * 龙舟设计页面交互功能
         */
        document.addEventListener('DOMContentLoaded', function() {
            // 龙舟部件选择功能
            const dragonParts = document.querySelectorAll('.dragon-part');
            const partsDisplay = document.getElementById('partsDisplay');
            const partsImages = document.querySelectorAll('.parts-image');

            /**
             * 处理龙舟部件点击事件
             * @param {Event} event - 点击事件
             */
            function handlePartClick(event) {
                const clickedPart = event.currentTarget;
                const partType = clickedPart.dataset.part;

                // 移除所有活动状态
                dragonParts.forEach(part => part.classList.remove('active'));
                partsImages.forEach(img => img.classList.remove('active'));

                // 添加活动状态到点击的部件
                clickedPart.classList.add('active');
                
                // 显示对应的图片
                const targetImage = document.querySelector(`.parts-image[data-part="${partType}"]`);
                if (targetImage) {
                    targetImage.classList.add('active');
                    partsDisplay.classList.add('has-image');
                    
                    // 隐藏占位符
                    const placeholder = partsDisplay.querySelector('.placeholder-icon');
                    const placeholderText = partsDisplay.querySelector('.placeholder-text');
                    if (placeholder) placeholder.style.display = 'none';
                    if (placeholderText) placeholderText.style.display = 'none';
                }
            }

            // 为每个龙舟部件添加点击事件监听器
            dragonParts.forEach(part => {
                part.addEventListener('click', handlePartClick);
            });

                         // 颜色选择功能
             const colorButtons = document.querySelectorAll('.color-btn');
             const designCanvas = document.getElementById('designCanvas');
             const dragonBoatImage = document.getElementById('dragonBoatImage');

             /**
              * 处理颜色按钮点击事件
              * @param {Event} event - 点击事件
              */
             function handleColorClick(event) {
                 const button = event.currentTarget;
                 const color = button.dataset.color;

                 // 移除其他按钮的活动状态
                 colorButtons.forEach(btn => btn.classList.remove('active'));

                 // 添加活动状态
                 button.classList.add('active');

                 // 显示龙舟图片
                 if (dragonBoatImage) {
                     dragonBoatImage.classList.add('active');
                     designCanvas.classList.add('active');
                     
                     // 隐藏占位符
                     const canvasPlaceholder = designCanvas.querySelector('.canvas-placeholder');
                     if (canvasPlaceholder) {
                         canvasPlaceholder.style.display = 'none';
                     }
                 }

                 // 根据选择的颜色处理不同的逻辑
                 switch(color) {
                     case 'red':
                         console.log('选择红色主题');
                         break;
                     case 'gold':
                         console.log('选择金色主题');
                         break;
                     case 'blue':
                         console.log('选择蓝色主题');
                         break;
                     case 'green':
                         console.log('选择绿色主题');
                         break;
                     case 'purple':
                         console.log('选择紫色主题');
                         break;
                     case 'orange':
                         console.log('选择橙色主题');
                         break;
                     case 'pink':
                         console.log('选择粉色主题');
                         break;
                     case 'cyan':
                         console.log('选择青色主题');
                         break;
                     default:
                         console.log('选择颜色：' + color);
                 }
             }

             // 为每个颜色按钮添加点击事件监听器
             colorButtons.forEach(button => {
                 button.addEventListener('click', handleColorClick);
             });

             // 滑块与数值输入框同步功能
             const controls = [
                 { slider: 'boatSpeed', input: 'boatSpeedInput' },
                 { slider: 'waterSpeed', input: 'waterSpeedInput' },
                 { slider: 'boatCurvature', input: 'boatCurvatureInput' }
             ];

             /**
              * 创建滑块和输入框的双向绑定
              * @param {string} sliderId - 滑块元素ID
              * @param {string} inputId - 输入框元素ID
              */
             function createSliderInputSync(sliderId, inputId) {
                 const slider = document.getElementById(sliderId);
                 const input = document.getElementById(inputId);

                 if (slider && input) {
                     // 滑块变化时更新输入框
                     slider.addEventListener('input', function() {
                         input.value = slider.value;
                     });

                     // 输入框变化时更新滑块
                     input.addEventListener('input', function() {
                         const value = parseFloat(input.value);
                         const min = parseFloat(slider.min);
                         const max = parseFloat(slider.max);
                         
                         // 确保值在范围内
                         if (value >= min && value <= max) {
                             slider.value = value;
                         }
                     });
                 }
             }

             // 为所有控制项创建双向绑定
             controls.forEach(control => {
                 createSliderInputSync(control.slider, control.input);
             });
        });
    </script>
    <script src="scripts/ai-chat-final.js"></script>
    <script src="scripts/navbar-component.js"></script>
    <script>
        // 初始化导航栏并设置当前页面
        initNavbar();
        setActiveNavPage('heritage.html');
    </script>
</body>
</html> 